<template>
  <div class="dictionary">
    <el-button type="primary" :icon="useRenderIcon(plus)" @click="topAdd"
      >新增</el-button
    >
    <div class="my-table mt-4">
      <el-table
        :data="dicitionaryStore.treeDicitionaryList"
        style="width: 100%"
        row-key="dictionaryId"
        border
      >
        <el-table-column prop="info" label="字典名称" align="center" />
        <el-table-column prop="dictKey" label="字典标签" align="center" />
        <el-table-column
          :show-overflow-tooltip="true"
          prop="value"
          label="字典值"
          align="center"
        />
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button
              type="primary"
              :icon="useRenderIcon(plus)"
              size="small"
              @click="add(scope.row)"
            />
            <el-button
              type="primary"
              size="small"
              :icon="useRenderIcon(edit)"
              @click="editItem(scope.row)"
            />
            <el-button
              v-if="!scope.row.children"
              type="primary"
              :icon="useRenderIcon(iconDel)"
              size="small"
              @click="del(scope.row)"
            />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 添加编辑弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      :title="isEdit ? '编辑节点' : '新增节点'"
      width="50%"
      @closed="closed"
    >
      <div class="dialog-content">
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="80px"
          class="demo-ruleForm"
          status-icon
        >
          <el-form-item label="字典名称" prop="info">
            <el-input v-model.trim="ruleForm.info" />
          </el-form-item>
          <el-form-item label="字典标签" prop="dictKey">
            <el-input v-model.trim="ruleForm.dictKey" />
          </el-form-item>
          <el-form-item label="字典值" prop="value">
            <el-input v-model="ruleForm.value" type="textarea" :rows="15" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submit" :loading="isLoading">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import plus from "@iconify-icons/ep/plus";
import iconDel from "@iconify-icons/ep/delete";
import edit from "@iconify-icons/ep/edit";
import { useDicitionaryStore } from "@/store/modules/dicitionary";
import { ref } from "vue";
import type {
  DictionaryAddRequest,
  treeDicitionaryList
} from "@/api/system/system";
import { reactive } from "vue";
import { ElMessage, ElMessageBox, FormInstance, FormRules } from "element-plus";
defineOptions({
  name: "dicitionary"
});
const dicitionaryStore = useDicitionaryStore();
//表单
const ruleForm = ref<DictionaryAddRequest>({
  dictKey: "",
  value: "",
  info: "",
  parentUuid: ""
});
const dialogVisible = ref(false);
const isEdit = ref(false);
const ruleFormRef = ref<FormInstance>();
const rules = reactive<FormRules<DictionaryAddRequest>>({
  info: [{ required: true, message: "请输入字典名称", trigger: "blur" }],
  dictKey: [{ required: true, message: "请输入字典标签", trigger: "blur" }]
});
const closed = () => {
  ruleForm.value = {
    dictKey: "",
    value: "",
    info: "",
    parentUuid: ""
  };
  ruleFormRef.value.clearValidate();
};
const topAdd = () => {
  isEdit.value = false;
  ruleForm.value.parentUuid = "";
  dialogVisible.value = true;
};
// 添加
const add = (item: treeDicitionaryList) => {
  isEdit.value = false;
  ruleForm.value.parentUuid = item.dictionaryId;
  dialogVisible.value = true;
};
// 编辑
const id = ref("");
const editItem = (edit: treeDicitionaryList) => {
  id.value = edit.dictionaryId;
  isEdit.value = true;
  for (const key in ruleForm.value) {
    ruleForm.value[key] = edit[key];
  }
  dialogVisible.value = true;
};
// 删除
const del = async (item: treeDicitionaryList) => {
  ElMessageBox.confirm("您确定要删除吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(async () => {
      await dicitionaryStore.delDicitionaryItem(item.dictionaryId);
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消"
      });
    });
};
// 提交
const addSubmit = async () => {
  await dicitionaryStore.addDicItem(ruleForm.value);
};
const editSubmit = async () => {
  const { dictKey, info, value } = ruleForm.value;
  await dicitionaryStore.editItem({ dictKey, info, value, id: id.value });
};
const isLoading = ref(false);
const submit = () => {
  ruleFormRef.value.validate(async valid => {
    if (valid) {
      isLoading.value = true;
      if (isEdit.value) {
        await editSubmit();
      } else {
        await addSubmit();
      }
      isLoading.value = false;
    }
  });
};
</script>
